<!-- 
  很少自己写，常用于 UI 组件库
 -->
<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>{{ username }}</h4>
    <h4>{{ password }}</h4>
    <!-- v-model 用在html标签上 -->
    <!-- <input type="text" v-model="username"> -->
    <!-- v-model 底层原理: 动态 value 值 配合 input 事件 -->
    <!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value"> -->
    
    <!-- v-model 用在组件标签上 -->
    <!-- <AtguiguInput v-model="username"/> -->
    <!-- <AtguiguInput 
    :modelValue="username" 
    @update:modelValue="(value) => username = value"/> -->
    <!-- <AtguiguInput 
    :modelValue="username" 
    @update:modelValue="username = $event"/> -->
    <!-- $event 
    HTML 元素标准 DOM 交互事件的 $event 是 DOM 事件对象, 可以添加 .target;
    AtguiguInput 是组件标签, @update:modelValue 是自定义事件, $event 就是传递过来的数据. 
    对于原生事件, $event 就是事件对象; 但是对于自定义事件, $event 就是触发事件时所传递的数据.
    -->

    <!-- 修改 modelValue -->
    <AtguiguInput v-model:ming="username" v-model:mima="password"/>
  </div>
</template>

<script setup lang="ts" name="Father">
import { ref } from "vue";
import AtguiguInput from "./AtguiguInput.vue";
// 数据
let username = ref('zhangsan')
let password = ref('123456')
// function setValue(value:string) {
//   console.log(value)
//   username.value = value
// }
</script>

<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>
